<template>
	<view>
		<view class="card" v-for="(item,index) in words" :key="index" v-show="index===currentIndex">
			<view class="card-content">
				<view class="word word-inputs">
					<view class="input-item" v-for="(word,index) in item.word">
						<input type="text" v-model="values[index]" style="width: 20px;" />
					</view>
				</view> 
				<view class="play-autio" @click="playVoice(item.word)">
					<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/播放.png" mode="widthFix"></image>
				</view>
				<view class="explain explain_zh">
					<text class="label">中文</text><text @click="showExplain=!showExplain" v-show="!showExplain">**查看提示**</text><text v-show="showExplain">{{item.explain || '--'}}</text>
				</view>
				<view class="explain explain_en">
					<text class="label">释义</text><text @click="showExplainEn=!showExplainEn" v-show="!showExplainEn">**查看提示**</text><text v-show="showExplainEn">{{item.explainEn || '--'}}</text>
				</view>
				<view :class="['word word-select',selectVal && op==selectVal && isRight ?'success':selectVal && !isRight && op==selectVal?'error':'']"  :key="n" v-for="(op,n) in item.selectOptions"  @click="selectAns(op,item)">
					{{sorts[n]}}.<text class="option-item">{{op}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const pageDataCenter=uniCloud.importObject('page-data-center')
	const AUDIO = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				sorts:['A','B','C','D'],
				words:[],
				type:null,
				currentIndex:0,
				isRight:null,
				showExplain:false,
				showExplainEn:false,
				selectVal:'',
				progress:'',
				values:[],
				id:'',
				share: {
					title: '词汇小课堂',
					imageUrl: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/cloudstorage/2a9a20de-8e3c-4800-b520-646eeaf2133f.png',
					desc: '单词学习打打卡',
					content: '我今天学习了新单词，你也一起来呀'
				}
			}
		},
		onLoad(e) {
			this.type=parseInt(e.type)
			e.id && this.getData(e.id)
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			wx.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		watch:{
			progress(val){
				val && uni.setNavigationBarTitle({
					title:this.currentIndex+'/'+this.words.length
				})
			}
		},
		methods: {
			getData(id){
				this.id=id
				pageDataCenter.getChapterListenWords(id).then((res)=>{
					console.log(res)
					this.words=res.data
					this.playVoice(this.words[0]['word'])
					uni.setNavigationBarTitle({
						title:'1/'+res.data.length
					})
				})
			},
			selectAns(op,item){
				console.log(op,item.explain)
				this.isRight=op==item.word?true:false
				this.selectVal=op
				this.isRight &&(this.values=op.split(""))
				this.isRight && setTimeout(()=>{
					this.values=
					this.currentIndex++
					this.selectVal=''
					this.showExplain=false
					this.showExplainEn=false
					this.words[this.currentIndex] && this.playVoice(this.words[this.currentIndex]['word'])
					this.progress = `${(this.currentIndex/this.words.length)*100}%`
					this.currentIndex == this.words.length && this.submitProgress()
					}, 500)
				},
				submitProgress(redirectTo=1) {
					pageDataCenter.submitProgress({
						chapter_id:this.id,
						type:this.type,
						progress: this.progress
					},'add').then((res) => {
						console.log('submitProgress',res)
						redirectTo && uni.redirectTo({
							url:'/pages/finish/finish?id='+this.id+`&count=${this.words.length}`
						})
					})
				},
			playVoice(word) {
			  AUDIO.src = 'https://dict.youdao.com/dictvoice?type=0&audio='+word
			  this.$nextTick(function () {
			    AUDIO.play();
			  });
			},
		},
		onUnload() {
			this.submitProgress(0)
		},
		onShareAppMessage(res) {
				//实现根据不同页面返回不同的转发信息
				let pages = getCurrentPages();
				let routerUrl = pages[0].route //获取当前页的路径
				return {
					title: this.share.title,
					path: '/' + routerUrl, // 路径前面必须要加'/'
					imageUrl: this.share.imageUrl,
					desc: this.share.desc,
					content: this.share.content,
					success(res) {
						uni.showToast({
							title: '分享成功'
						})
					},
					fail(res) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				}
			}
	}
</script>

<style scoped>
	page,.page{
		background-color: #e3ebee;
	}
	.card{
		padding: 20px;
		text-align: center;
		background-color: #fff;
		font-size: 16px;
		margin: 40px auto;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 90%;
	}
	.word-inputs{
		display: flex;
		margin: 0 auto;
		justify-content: center;
	}
	.input-item{
		border-bottom: 3px solid #333;
		margin: 0 4px;
	}
	.word-top{
		font-size: 20px;
		margin-bottom: 20px;
		font-weight: 700;
	}
	.word-select{
		color: #333;
		padding: 10px;
		text-align: left;
		border: 1px solid #eee;
		border-radius: 8px;
		box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
		margin: 15px auto;
	}
	.explain{
		margin: 8px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.explain text{
		margin-right: 5px;
		flex: 1;
		font-size: 14px;
		color: #333;
		text-align: left;
	}
	.explain text:last-child{
		 color: #666;
	}
	.explain text:first-child{
		 flex: 0 0 40px;
		 display: inline-block;
		 text-align: center
	}
	.label{
		background-color: #45ff8f;
		color: #fff;
		padding: 2px 6px;
		border-radius: 5px;
	}
	.option-item{
		margin-left: 5px;
	}
	.play-autio{
		margin: 12px 0;
	}
	.play-autio image{
		width: 36px;
	}
	.success{
		border-color: #00cb62;
		background-color: #8bcb96;
	}
	.error{
		border-color: #ee0b0b;
		background-color: #cb9394;
	}
</style>
